{% if section.page_id %}
{% get_product product_id={section.page_id} body_html=1 %}
{% assign product = product %}
{% assign payment = section.params.payment %}
{% assign comments = comments | default : section.params.comments %}
{% endif %}

<style>
    .product_detail_default {
        margin: 0 auto;
    }


    .product_detail_default .product-info-subtitle{
            text-align: center;
            margin-bottom: 12px;
            color: var(--title_color);
            font-size: var(--product_font_size);
    }
    .product_detail_default .product-warp{
        margin: 60px auto 0 auto;
        max-width: var(--general_layout_width);
    }

    .product_detail_default .product-info-describe{
        text-align: center;
        font-size: 14px;
        margin-bottom: 12px;
        color: var(--detail_color);
    }
    .product-swiper-small .arrow {
        padding:0 12px;
        display: none;
        font-size: 0;
    }
    .cell-star{
        display: flex;
        justify-content: center;
        margin-top:12px
    }
    .product-comment-fraction {
        display: flex;
        align-items: center;
    }

    .product-comment-fraction svg {
        margin-right: 4px;
    }

    .product-comment-fraction>svg:last-child {
        margin-right: 0;
    }

    .product-comment-fraction span {
        font-weight: 500;
        color: #1d1f21;
        font-size: 18px;
        line-height: 1;
        margin-left: 6px;
    }

    .comment-star-warp {
        position: relative;
        display: flex;
        align-items: center;
    }
    .comment-star-warp-choose {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        overflow: hidden;
    }


    .product_detail_default .product-card-bottom{
        margin: 16px auto 0 auto;
        max-width: var(--general_layout_width);
    }

    .comment-star-warp-choose svg {
        flex-shrink: 0;
    }
    .product_detail_default .swiper-button-disabled path{
        fill:#999999
    }
    @media (max-width: 767px) {
        
        .product-swiper-small .arrow {
            display: inline-block;
        }

        .product-swiper-small {
            display: flex;
            justify-content: space-between;
            padding:15px 0;
        }

        /* .product-swiper-small .swiper-container-small {
            display: flex;
            justify-content: center;
        } */

        .product-swiper-small .swiper-container-small .swiper-small-item {
            width: 10px;
            height: 10px;
            border: 2px solid var(--color-main);
            border-radius: 50%;
            box-sizing: border-box;
        }
        .product-swiper-small .swiper-container-small .swiper-small-item:last-child{
            margin-right: 0 !important;
        }

        .product-swiper-small .swiper-container-small .swiper-small-item-active {
            border: 2px solid var(--color-main);
            background-color: var(--color-main);

        }

        .product-swiper-small .swiper-container-small .swiper-small-item img {
            display: none;
        }
    }

    .product_detail_default .product-right .secondary_btn,.product_detail_default .product-right .main_btn{
        margin-top:0;
        position: relative;
        z-index: 100;
    }

    .product_detail_default .comment_warp-empty{
        /* text-align: center;
        height: 60px;
        line-height: 60px;
        font-size: 16px; */
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        padding: 20px 0;
    }
    .product_detail_default .comment_warp-empty span{
        color: #888888;
        font-size: 14px;
        line-height: 18px;
        margin-top: 20px;
    }

    .product_detail_default .cell-item{
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .product-router-nav{
        /* align-items: center; */
        color: #737373;
        font-size: 14px;
        line-height: 22px;
        flex-wrap: wrap;
        padding:16px 0;
        background: #F6F6F6;
    }

    .product-router-nav-warp{
        margin: 0 auto;
        max-width: var(--general_layout_width);
    }
    .product-router-nav a{
        color: #999999;
        font-size: 14px;
        line-height: 17px;
    }
    .product-router-nav .on{
        color: #666666;
        overflow:hidden;
    }
    .product-router-nav span{
        padding: 0 4px;
        
    }
    @media screen and (min-width:846px) and (max-width: 1200px) {
        .product-router-nav{
            padding: 16px 30px;
        }
    }
    @media screen and (max-width:845px)  {
        .product-router-nav{
            display: none;
        }
    }
    
</style>

<div class="product_detail_default product_detail-card-bottom" id="product_detail">
    {% if section.settings.bread_crumbs %}
    <div class="product-router-nav">
        <div class="product-router-nav-warp">
            <a href="/" >{{lang.product.home}}</a>
            {% if product.current_collection %}
                <span>/</span>
                <a href="/collections/{{product.current_collection.handle}}">{{product.current_collection.title}}</a>
            {% endif %}
            <span>/</span>
            {{product.title}}
        </div>
    </div>
    {% endif %}
    
    <div class="product-warp">
        <div class="product-left"  {% if product.images.size == 1 %} style="margin-bottom:12px"  {% endif %}>
            <div class="swiper-container swiper-container-{{ block_id | default : section.block_id }}">
                <ul class="swiper-wrapper" style="width:100%">
                    {% for image in product.images %}
                    <li class="swiper-slide">
                        <img style="width: 100%" data-src="{{ image.src }}" src="{{ 'empty.png' | public_asset_abs_url }}" alt="{{ image.alt | default : product.title }}" />
                    </li>
                    {% endfor %}
                </ul>
            </div>
        {% if product.images.size > 1 %}
            <div class="product-swiper-small" >
                <div class="navigation " id='prev_' style="display: none;">
                    {% include icon_silde_left ,{width:'24',height:'24'} %}
                </div>

                <div class="arrow arrow-prev" data-type='prev'>
                    <svg t="1642570712144" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24369" width="24" height="24"><path d="M85.333333 512.042667l320-256v213.333333H1024v85.333333H405.333333v213.333334z" fill="#999999" p-id="24370"></path></svg>
                </div>
                <div class="swiper-container-small swiper-container-small-{{ block_id | default : section.block_id }}">
                    <ul class="swiper-wrapper">
                        {% for image in product.images %}
                        <li class="swiper-slide swiper-small-item">
                            <img style="width: 100%"  data-src="{{ image.src }}" src="{{ 'empty.png' | public_asset_abs_url }}" alt="{{ image.alt }}" />
                        </li>
                        {% endfor %}
                    </ul>
                </div>
                <div class="arrow arrow-next" data-type='next'>
                    <svg t="1642570805735" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2600" width="24" height="24"><path d="M938.666667 511.957333l-320 256 0-213.333333L0 554.624l0-85.333333L618.666667 469.290667l0-213.333334z" fill="#1D1F21" p-id="2601"></path></svg>
                </div>
                <div class="navigation " id='next_' style="display: none;">
                    {% include icon_silde_right ,{width:'24',height:'24'} %}
                </div>
            </div>
        {% endif %}
        </div>
        <div class="product-right" id="sku-option-{{ block_id | default : section.block_id }}">
            <!-- title -->
            <div class="product-name">
                <p>{{ product.title }}</p>
                {% if product.comment_count > 0 %}
                <div class="cell-star">
                    <div class="product-comment-fraction">
                        <div class="comment-star-warp">
                            {% for index in (1..5) %}
                            {% include icon_block_star ,{width:"20",height:"20",color: "#bbbbbb"} %}
                            {% endfor %}

                            {% assign star = 0 %}
                            {% if product.star %}  
                            {% assign star = product.star | divided_by: 5 | times:100 %} 
                            {% endif %}
                            <div class="comment-star-warp-choose" style="width:{{star}}%">
                                {% for index in (1..5) %}
                                {% include icon_block_star ,{width:"20",height:"20",color: "#F8AD6B"} %}
                                {% endfor %}
                            </div>
                        </div>
                        <span>({{ product.star }})</span>
                    </div>
                </div>
                {% endif %}
            </div>
            

            {% if product.subtitle %}
            <div class="product-info-subtitle">{{ product.subtitle }}</div>
            {% endif %}
            
            {% if product.mini_detail %}
            <div class="product-info-describe">{{ product.mini_detail | newline_to_br }}</div>
            {% endif %}

            <!-- sku -->
            <div class="product-sku">
                <div class="cell-item" id="plugin-product-price" style="margin-top: 0">
                    <div class="product-price">
                        <div class="product-price-number general_buying-color"></div>
                        <div class="product-price-market general_original-color"></div>
                    </div>
                </div>
                <div class="sku-cell"></div>
                <div class="cell-item">
                    <span class="product-sku-name">{{lang.cart.list.quantity}}</span>
                </div>
                <div class="cell-item">
                    <div class="product-calculator" id='mo-quantity-{{ block_id | default : section.block_id }}'>
                        <div class="product-calculator-handle" data-type='reduce'>
                            {% include icon_minus ,{width:'16',height:'16'} %}
                        </div>
                        <div class="product-calculator-value">1</div>
                        <div class="product-calculator-handle" data-type='add'>
                            {% include icon_plus ,{width:'16',height:'16'} %}
                        </div>
                    </div>
                </div>
                <div class="cell-item">
                    <div class="product-btns">
                        {% if product.available == 0 %}
                        <div class="mo-btn mo-btn-default mo-btn-disable mo-btn-plan mo-btn-max mo-btn-block" >{{lang.product.out_of_stock}}</div>
                        {% else %}
                        <div class="secondary_btn plugin-product-cart" data-type="cart" data-plug="cart" id='add-cart-{{ block_id | default : section.block_id }}'>{{lang.product.add_to_cart}}</div>
                        <div class="divider"></div>
                        <div class="main_btn plugin-product-now" data-type="buyNow" data-plug="buy_now" id="buynow-{{ block_id | default : section.block_id }}">{{lang.product.buy_it_now}}</div>
                        {% endif %}
                    </div>
                </div>
                {% unless product.available == 0 %}
                {% if payment %}
                <div class="cell-item" style="margin-top:20px">
                    {% include product_payment_paypalcheckout , { pay_block_id:block_id } %}
                </div>
                {% endif %}
                {% endunless %}
                {%- if section.settings.content -%}
                <div class="cell-item mo-editor-reset" style="margin-top:20px">
                    {{section.settings.content}}
                </div>
                {%- endif -%}
            </div>
            <div class="product-card-right" style="display:{% if section.settings.position == "right" %}block{% else %}none{% endif %} ;">
                <!-- detail -->
                <div class="module-box">
                    <div class="module-cell module-cell-active">
                        <div class="module-cell-header">
                            <span class="module-cell-tile">{{lang.product.detail}}</span>
                            <span class="add-icon">
                            {% include icon_plus ,{width:'16',height:'16'} %}
                            </span>
                            <span class="reduce-icon">
                            {% include icon_minus ,{width:'16',height:'16'} %}
                            </span>
                        </div>
                        <div class="detail-box mo-editor-reset">
                            <!-- <iframe frameborder="0" id="body_html" style="background-color:transparent;border:0;box-sizing:border-box;width:100%"></iframe> -->
                            {{ product.body_html }}
                        </div>
                    </div>
                    {% if storeConfig.comments_status %}
                    <div class="module-cell" data-type="comment">
                        <div class="module-cell-header">
                            <span class="module-cell-tile">{{lang.product.customer_reviews}}</span>
                            <span class="add-icon">
                                {% include icon_plus ,{width:'16',height:'16'} %}
                            </span>
                            <span class="reduce-icon">
                                {% include icon_minus ,{width:'16',height:'16'} %}
                            </span>
                        </div>
                        <div class="detail-box">
                            <div class="comment-warp" id="comment-right-warp"></div>
                            <a href="/comments/{{product.handle}}" style="margin-top: 24px;" class="comment-btn secondary_btn">{{lang.product.all_comment}}</a>
                            <!-- <a class="comment-btn write-comment mo-btn mo-btn-default mo-btn-plan mo-btn-max mo-btn-block">{{lang.product.write}}</a> -->
                        </div>
                    </div>
                    {% endif %}
                </div>
                {% if section.settings.position == "right" %}
                {% include product_share_svg %}
                {% endif %}
            </div>
        </div>
    </div>
    <div class="product-card-bottom" style="display:{% if section.settings.position == "right" %}none{% else %}block{% endif %} ;">
        <div class="product-tabs">
            <div  class="product-tabs-item product-tabs-item-active">{{lang.product.detail}}</div>
            {% if storeConfig.comments_status == 1 %}
            <div  class="product-tabs-item" data-type="comment">{{lang.product.customer_reviews}}</div>
            {% endif %}
        </div>
        <div class="product-tabs-content">
            <div class="product-tabs-content-item product-tabs-content-item-active mo-editor-reset">
                <!-- <iframe frameborder="0" id="bottom_body_html" style="background-color:transparent;border:0;box-sizing:border-box;width:100%"></iframe> -->
                {{ product.body_html }}
            </div>
            {% if storeConfig.comments_status == 1 %}
            <div class="product-tabs-content-item ">
                <div class="comment-warp" id="comment-bottom-warp"></div>
                <a href="/comments/{{product.handle}}" class="comment-btn secondary_btn">{{lang.product.all_comment}}</a>
            </div>
            {% endif %}

        </div>
    </div>
    {% unless section.settings.position == "right" %}
    {% include product_share_svg %}
    {% endunless %}
    <div class="back-box">
        <a href="javascript:history.back();">
            <svg t="1642570712144" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24369" width="24" height="24"><path d="M85.333333 512.042667l320-256v213.333333H1024v85.333333H405.333333v213.333334z" p-id="24370"></path></svg>
            <span>{{lang.general.back}}</span>
        </a>
    </div>
</div>

{% include comment %}
<script type="text/x-template" id="omesaas-comment-empty">
{% include empty ,{text:lang.comments.no_comments, icon:"comment" }%}
</script>
<script type="text/javascript">
    (function(){
    function addProductTab(tabData,classStr) {
        if (!Array.isArray(tabData)) {
            console.error("tab data error");
            return false;
        }

        tabData.forEach((item) => {
            $(".product-tabs").append(`<div class="product-tabs-item ${classStr}" onclick="productTabsClick(this)">${item.title}</div>`);
            $(".module-box").append(`<div class="module-cell ${classStr}">
                        <div class="module-cell-header" onclick="moduleCellClick(this)">
                            <span class="module-cell-tile">${item.title}</span>
                            <span class="add-icon">
                            <svg t="1632822569855" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1730" width="16" height="16"><path d="M64 512m32 0l896 0q32 0 32 32l0 0q0 32-32 32l-896 0q-32 0-32-32l0 0q0-32 32-32Z" opacity=".9" p-id="1731"></path><path d="M576 64m0 32l0 896q0 32-32 32l0 0q-32 0-32-32l0-896q0-32 32-32l0 0q32 0 32 32Z" opacity=".9" p-id="1732"></path></svg>
                            </span>
                            <span class="reduce-icon">
                            <svg t="1632822538038" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1600" width="16" height="16"><path d="M64 512m32 0l896 0q32 0 32 32l0 0q0 32-32 32l-896 0q-32 0-32-32l0 0q0-32 32-32Z" opacity=".9" p-id="1601"></path></svg>
                            </span>
                        </div>
                        <div class="detail-box mo-editor-reset">${item.content}</div>
                        </div>`);
            $(".product-tabs-content").append(`<div class="product-tabs-content-item mo-editor-reset ${classStr}">${item.content}</div>`);
        });
    }
    window.addProductTab = addProductTab;
    window.productTabsClick = function(elmnt){
        $(elmnt).addClass(tabsClass).siblings().removeClass(tabsClass);
        $('.product-tabs-content-item').eq($(elmnt).index()).addClass(contentClass).siblings().removeClass(contentClass);
        $('.module-cell').eq($(elmnt).index()).addClass(cellClass).siblings().removeClass(cellClass);
    };

    window.moduleCellClick = function(elmnt){
            if($(elmnt).parent().hasClass(cellClass)){
                $(elmnt).parent().removeClass(cellClass)
            }else{
                $(elmnt).parent().addClass(cellClass).siblings().removeClass(cellClass);
                $('.product-tabs-item').eq($(elmnt).parent().index()).addClass(tabsClass).siblings().removeClass(tabsClass);
                $('.product-tabs-content-item').eq($(elmnt).parent().index()).addClass(contentClass).siblings().removeClass(contentClass);
            }
    };

    //当前sku
        var productInfo = {{product | json}};
        //缓存页面数据
        moi.setPageStorage('product_detail', productInfo);

        console.log(productInfo)
        console.log({{comments|json}})

        //hide back dmo
        if(document.referrer === "" ){
            $(".back-box").hide()
        }

    
        let commentList = {{comments|json}};
        const waterfall = new waterfalls({
                id: "#comment-bottom-warp",
                bottomDistance: 30,
                renderType: "liquid",
                renderComplete(node) {
                    window.addLazyImages && addLazyImages(node.find("img[data-src]"));
                    node.find(".comment_warp-images img").click(function () {
                        const JqThis = $(this);
                        const parentIndex = JqThis.data("parent");
                        moi.pictureImages(commentList[parentIndex].images.src, JqThis.data("index") - 1, JqThis)
                    })
                },
                resizeConfig: [
                    {min: 0,max: 1023,rowGutter: '20px',columnsGutter: '20px',columns: 1},
                    {min: 1024,rowGutter: '30px',columnsGutter: '30px',columns: 2}
                ],
                render(data, callback) {
                    engine.parseAndRender($("#omesaas-comment-temp-block").html(), {
                        comments: data.map((item) => {
                                item.price = formatMoney(item.price, oemcart_currency);
                                item.created_at_str = moi.formatZoneDate(item.created_at, "YYYY-mm-dd");
                                item.replied_at_str = moi.formatZoneDate(item.replied_at, "YYYY-mm-dd");
                                return item;
                            }),
                            lang: lang,
                            storeConfig: storeConfig
                    }).then(function (liquidHtml) {
                        const node = $(liquidHtml);
                        callback && callback.call(this, node)
                    });

                }
        })

        const rightWaterfall = new waterfalls({
                id: "#comment-right-warp",
                bottomDistance: 30,
                renderType: "liquid",
                renderComplete(node) {
                    window.addLazyImages && addLazyImages(node.find("img[data-src]"));
                    node.find(".comment_warp-images img").click(function () {
                        const JqThis = $(this);
                        const parentIndex = JqThis.data("parent");
                        moi.pictureImages(commentList[parentIndex].images.src, JqThis.data("index") - 1, JqThis)
                    })
                },
                resizeConfig: [
                    {min: 0,rowGutter: '20px',columnsGutter: '20px',columns: 1}
                ],
                render(data, callback) {
                    engine.parseAndRender($("#omesaas-comment-temp-block").html(), {
                        comments: data.map((item) => {
                                item.price = formatMoney(item.price, oemcart_currency);
                                item.created_at_str = moi.formatZoneDate(item.created_at, "YYYY-mm-dd");
                                item.replied_at_str = moi.formatZoneDate(item.replied_at, "YYYY-mm-dd");
                                return item;
                            }),
                            lang: lang,
                            storeConfig: storeConfig
                    }).then(function (liquidHtml) {
                        const node = $(liquidHtml);
                        callback && callback.call(this, node)
                    });
                }
        })
        

        var smallIndex = 0;
        var mySwiper = new Swiper('.swiper-container-{{ block_id | default : section.block_id }}', {
                autoHeight: true,
                updateOnImagesReady : true,
                on: {
                    init() {
                        setSmallClass(0)
                    },
                    slideChangeTransitionStart() {
                        smallIndex = this.activeIndex;
                        setSmallClass(this.activeIndex)
                        mySwiperSmall.slideTo(this.activeIndex)
                        $('.arrow-prev').find('path').css({"fill":"#1d1f21"})
                        $('.arrow-next').find('path').css({"fill":"#1d1f21"})
                        if(this.isBeginning){
                            $('.arrow-prev').find('path').css({"fill":"#999999"})
                        }
                        if(this.isEnd){
                            $('.arrow-next').find('path').css({"fill":"#999999"})
                        }
                    }
                }
        })

        moi.addEvent('lazyImg',function(){
            if(this.params && this.params.indexOf(productInfo.images[0].src) > -1){
                mySwiper.updateAutoHeight()
            }
        })

        function setSmallClass(index) {
            $(".swiper-small-item").eq(index).addClass("swiper-small-item-active").siblings().removeClass("swiper-small-item-active");
        }

        var mySwiperSmall = new Swiper('.swiper-container-small-{{ block_id | default : section.block_id }}', {
            spaceBetween: 10,
            slidesPerView:'auto',
            navigation: {
                nextEl: '#next_',
                prevEl: '#prev_',
            },
            on: {
                tap: function (swiper, event) {
                    mySwiper.slideTo(mySwiperSmall.clickedIndex)
                    mySwiperSmall.slideTo(mySwiperSmall.clickedIndex)
                    setSmallClass(mySwiperSmall.clickedIndex)
                },
                slideChangeTransitionStart:function(){
                    console.log(mySwiperSmall.clickedIndex)
                }
            }
        })
        $(".product-swiper-small .arrow").click(function (event) {
            event.stopPropagation()
            const type = $(this).data("type");
            if (type === "next" && smallIndex < Number("{{ product.images | size}}")) {
                smallIndex++;
            }

            if (type === "prev" && smallIndex) {
                smallIndex--;
            }
            mySwiper.slideTo(smallIndex)
            setSmallClass(smallIndex)

        })


        const dom = $('.swiper-container-small-{{ block_id | default : section.block_id }}');

        function isShowNavigation(argument) {
            if($(window).width() > 767 ){
           const li = dom.find('.swiper-wrapper li');
            if (dom.width() < li.length * (li.innerWidth() + 10)) {
                $('#next_').show()
                $('#prev_').show()
            } else {
                $('#next_').hide()
                $('#prev_').hide()
            }
            }else{
                $('#next_').hide()
                $('#prev_').hide()
            }
        }
        
        const productDetail = new omesaasProduct({
            product:productInfo,
            data_from:'{{ detail_data_from }}',
            ec_currency_code: '{{ base_currency.standard_code }}',
            id:'#sku-option-{{ block_id | default : section.block_id }}',
            changeOption:function(params){
                mySwiper.updateAutoHeight();
                if(params.image && params.image.src){
                    const index = productInfo.images.findIndex(el=>el.src === params.image.src);
                    setSmallClass(index)
                    mySwiper.slideTo(index)
                }
                //设置页面缓存
                moi.setPageStorage('product_params', params);
                //选择事件
                moi.onEvent("productOptionChange")
            }
        })

        window.oemsaasProductDetail = productDetail;
        
        //payPal支付成功回调
        moi.addEvent('paypalec_callback', function (event) {
            if(event.params.payId === '{{block_id}}'){
                productDetail.callbackAddToCart();
            }
        })

        moi.quantity({
            dom: $("#mo-quantity-{{ block_id | default : section.block_id }}"),
            change(val) {
                productDetail.setSelectedVal({quantity:val.value });
            }
        })


        $(window).resize(function () {
            isShowNavigation()
        })

        isShowNavigation()

        //切换tab
        const tabsClass = 'product-tabs-item-active';
        const contentClass = 'product-tabs-content-item-active';
        const cellClass = 'module-cell-active';
       
        let isCommentShow = false;
        if (!commentList.length) {
            $(".comment-warp").html($('#omesaas-comment-empty').html())
        }else{
            waterfall.addStorage({{comments|json}})
            rightWaterfall.addStorage({{comments|json}})
        }
        
          $('.product-tabs-item').click(function () {
           
            
            $(this).addClass(tabsClass).siblings().removeClass(tabsClass);
            $('.product-tabs-content-item').eq($(this).index()).addClass(contentClass).siblings().removeClass(contentClass);
            $('.module-cell').eq($(this).index()).addClass(cellClass).siblings().removeClass(cellClass);
        })

        $('.module-cell .module-cell-header').click(function () {
            if($(this).parent().hasClass(cellClass)){
                $(this).parent().removeClass(cellClass)
            }else{
                $(this).parent().addClass(cellClass).siblings().removeClass(cellClass);
                $('.product-tabs-item').eq($(this).parent().index()).addClass(tabsClass).siblings().removeClass(tabsClass);
                $('.product-tabs-content-item').eq($(this).parent().index()).addClass(contentClass).siblings().removeClass(contentClass);
            }
        })
        

        // 添加购物车
        $("#add-cart-{{ block_id | default : section.block_id }}").click(function () {

            if(!productDetail.verifyOption("cart")){
                 return false
            }
            moi.addEvent('addCart', function (event) {
                productDetail.cartLayer();
            },true)

            var load = moi.nodeShowLoading(this, "mo-loading-black")
            productDetail.addCart(function () { load.close(); }, function (data) {
                if (!data.code) {
                    let ids = '';
                    if (productInfo.collections.length) {
                        ids = productInfo.collections.map((item) => item.collection_id).join(",")
                    }
                    moi.onEvent("addCart",{
                        product_id: productDetail.product.id,
                        collection_id: ids
                    })
                } else {
                    return moi.alert({
                        title: data.msg
                    });
                }
            })

            // params.skuName = params.title;
        })

        //直接购买
        $("#buynow-{{ block_id | default : section.block_id }}").click(function () {

            if(!productDetail.verifyOption('buy')){
                 return false
            }
            var load = moi.nodeShowLoading(this)

            productDetail.buynow(function () { load.close(); }, function (ret) {
                if (!ret.code) {
                        window.location.href = ret.data.checkout_url 
                    } else {
                        return moi.alert({
                            title: ret.msg
                        });
                    }
            })
        })
    })()

</script>
{% schema %}
{
    "tag": "",
    "class": "product_detail",
    "is_global": false,
    "name": {
        "zh_CN": "商品详情"
    },
    "max_blocks": "0",
    "settings": [
        {
            "type": "card_header",
            "label": {
                "zh_CN": "元素展示"
            }
        },
        {
            "type": "card_switch",
            "label": {
                "zh_CN": "facebook"
            },
            "default": true,
            "id": "is_facebook"
        },
        {
            "type": "card_switch",
            "label": {
                "zh_CN": "twitter"
            },
            "default": true,
            "id": "is_twitter"
        },
        {
            "type": "card_switch",
            "label": {
                "zh_CN": "Pinterest"
            },
            "default": true,
            "id": "is_pinterest"
        },
        {
            "type": "card_switch",
            "label": {
                "zh_CN": "Facebook Dialog"
            },
            "default": true,
            "id": "is_dialog"
        },
        {
            "type": "card_switch",
            "label": {
                "zh_CN": "vk"
            },
            "default": true,
            "id": "is_vk"
        },
        
         {
            "type": "card_switch",
            "label": {
                "zh_CN": "linkedin"
            },
            "default": true,
            "id": "is_linkedin"
        },
        {
            "type": "card_switch",
            "label": {
                "zh_CN": "line"
            },
            "default": true,
            "id": "is_line"
        },
        {
            "type": "card_switch",
            "label": {
                "zh_CN": "tumblr"
            },
            "default": true,
            "id": "is_tumblr"
        },
        {
            "type": "card_switch",
            "label": {
                "zh_CN": "面包屑"
            },
            "default": true,
            "id": "bread_crumbs"
        },
        {
            "type": "card_select",
            "label": {
              "zh_CN": "详情位置"
            },
            "id": "position",
            "option": [
              {
                "label": {
                  "zh_CN": "下"
                },
                "value": "bottom"
              },
              {
                "label": {
                  "zh_CN": "右"
                },
                "value": "right"
              }
            ],
            "default": "bottom"
          },
          {
        "type": "card_text_editor",
        "label": {
          "zh_CN": "其他内容"
        },
        "id": "content"
      }
    ],
    "blocks": [],
    "default": {
        "settings": {
            "is_facebook": true,
            "is_twitter": true,
            "is_pinterest": true,
            "bread_crumbs":true,
            "is_dialog": true,
            "is_vk": true,
            "is_tumblr": true,
            "is_linkedin": true,
            "is_line": true,
            "position":"bottom",
            "content":""
        },
        "blocks": []
    }
}
{% endschema %}